<template>
  <div class="app-container">

    <el-form :model="form" ref="form" label-width="160px" v-loading="formLoading" :rules="rules">
     <el-form-item label="题干：" style="padding: 20px 0px 30px 50px " prop="title" required>
         <el-input v-model="form.title"></el-input>
      </el-form-item>
       <el-form-item label="答案：" style="padding: 20px 0px 30px 50px " prop="correct" required>
        <Editor ref="editor" v-model="form.correct" style="width: 60%;height: 100%" />
      </el-form-item>
       <el-form-item label="解析：" style="padding: 0px 0px 30px 50px " prop="analyze">
        <Editor ref="editor" v-model="form.analyze" style="width: 60%;height: 100%" />
      </el-form-item>
      <el-form-item label="分数：" style="padding: 20px 0px 30px 50px "  prop="score" required>
        <el-input-number v-model="form.score" :precision="1" :step="1" :max="100"></el-input-number>
      </el-form-item>
      <el-form-item label="难度：" style="padding: 20px 0px 30px 50px "  prop="difficult">
        <el-rate v-model="form.difficult" class="question-item-rate"></el-rate>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="showQuestion">预览</el-button>
      </el-form-item>

    </el-form>
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading"/>
    </el-dialog>
      
  </div>
</template>

<script>
import {select,edit} from "@/api/xzs/question";
import Editor from '@/components/Editor';
import QuestionShow from '../components/Show'
export default {
  inject:['reload'],
   components: {
    Editor, QuestionShow
  },
  data() {
    return {
      form: {
      id: null,
        questionType: 5,
        gradeLevel: null,
        subjectId: null,
        title: '',
        items: [],
        analyze: '',
        correct: '',
        score: '',
        difficult: 0
      },
      formLoading: false,
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      },
      rules: {
        title: [
          { required: true, message: '请输入题干', trigger: 'blur' }
        ],
        score: [
          { required: true, message: '请输入分数', trigger: 'blur' }
        ],
        correct: [
          { required: true, message: '请选择正确答案', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    let id = this.$route.query.id
    let _this = this
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      select(id).then(re => {
        _this.form = re.response
        _this.formLoading = false
      })
    }
  },
  methods: {
    
      submitForm () {
      let _this = this
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.formLoading = true
          edit(this.form).then(data => {
            if (data.code === 1) {
              _this.$message.success(data.message)
              _this.$router.push('/exam/question/index')
             
            } else {
              _this.$message.error(data.message)
              _this.formLoading = false
            }
          }).catch(e => {
            _this.formLoading = false
          })
        } else {
          return false
        }
      })
    },
     showQuestion () {
      this.questionShow.dialog = true
      this.questionShow.qType = this.form.questionType
      this.questionShow.question = this.form
    },
    resetForm () {
      this.reload()
    }
  }
};
</script>